<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转换为js -->
    <script src="../js/babel.min.js"></script>



    <script type="text/babel">
        class Person{
            //构造器
            constructor(name, age){
                this.name = name;
                this.age = age;
            }
            //普通方法
            speak(){
                console.log(`我叫${this.name}，今年${this.age}岁。`)
            }
        }

        //子类
        class Student extends Person {
            //子类构造器
            constructor(name, age, grade){
                super(name, age); //调用父类的构造器，必须写在第一行
                this.grade = grade;
            }
            //重写父类继承过来的方法
            speak(){
                console.log(`我叫${this.name}，今年${this.age}岁。我的年级是${this.grade}。`)
            }
        }

        const p1 = new Person("张三", 26);
        console.log(p1);
        p1.speak();

        const s1 = new Student("李四", 18, "高三");
        console.log(s1)
        s1.speak();

    </script>
</body>

</html>